<div class="row-fluid" ng-controller="demoDatepickerCtrl">
    <div class="span4">
        <div>
            <h2>Timezones</h2>

            <div ng-repeat="timezone in timezones">

                <h4>{{timezone[0]}}</h4>

                <div date-picker="dates.today" timezone="{{timezone[1]}}" view="hours" min-view="hours" watch-direct-changes="true"></div>

                <hr />

            </div>

            <h4>No timezone (Uses local)</h4>

            <div date-picker="dates.today" view="hours" min-view="hours" watch-direct-changes="true"></div>

        </div>
        <hr />

        <h2>Custom formats</h2>
        <div ng-repeat="format in formats">
            <h5>{{format}}</h5>
            <input type="text" date-time ng-model="dates.today" view="hours" format="{{format}}">
        </div>

    </div>
    <div class="span4">
        <h2>Minimum / Maximum dates</h2>

        <div>
            <h4>Always open div (date-picker directive)</h4>

            <div>
                <h5>Minimum</h5>
                <div date-picker="dates.today" id="pickerMinDateDiv" min-date="minDate" view="date" min-view="hours" timezone="UTC" watch-direct-changes="true"></div>
            </div>

            <div>
                <h5>Maximum</h5>
                <div date-picker="dates.today" id="pickerMaxDateDiv" max-date="maxDate" view="date" min-view="hours" timezone="UTC" watch-direct-changes="true"></div>
            </div>

            <div>
                <h5>Minimum + maximum</h5>
                <div date-picker="dates.today" id="pickerBothDatesDiv" min-date="minDate" max-date="maxDate" view="date" min-view="hours" timezone="UTC" watch-direct-changes="true"></div>
            </div>
        </div>

        <div>
            <h4>Input with popup (date-time directive)</h4>

            <form name="demoForm">
                <div>
                    <h5>Min ({{demoForm.pickerMinDate.$error.min ? 'Min: invalid' : 'Min: valid'}})</h5>
                    <input date-time name="pickerMinDate" ng-model="dates.today" id="pickerMinDate" min-date="minDate" view="date" min-view="hours" timezone="UTC" format="lll">
                </div>

                <div>
                    <h5>Max ({{demoForm.pickerMaxDate.$error.max ? 'Max: invalid' : 'Max: valid'}})</h5>
                    <input date-time name="pickerMaxDate" ng-model="dates.today" id="pickerMaxDate" max-date="maxDate" view="date" min-view="hours" timezone="UTC" format="lll">
                </div>

                <div>
                    <h5>Min + max ({{demoForm.pickerBothDates.$error.min ? 'Min: invalid, ' : 'Min: valid, '}} {{demoForm.pickerBothDates.$error.max ? 'max: invalid' : 'max: valid'}})</h5>
                    <input date-time name="pickerBothDates" ng-model="dates.today" id="pickerBothDates" min-date="minDate" max-date="maxDate" view="date" min-view="hours" timezone="UTC" format="lll">
                </div>
            </form>
        </div>

        <div>
            <h2>Range</h2>

            <div date-range id="pickerRange" start="dates.minDate" end="dates.maxDate" date-change="changeDate" view="date" min-view="date" timezone="UTC"></div>

        </div>

    </div>
    <div class="span4">
        <h2>Update events</h2>
        <div>
            <h4>Minimum date</h4>
            <input date-time ng-model="dates.minDate" id="pickerMinSelector" date-change="changeMinMax" max-date="maxDate" view="date" timezone="UTC" format="lll">
        </div>
        <div>
            <h4>Maximum date</h4>
            <input date-time ng-model="dates.maxDate" id="pickerMaxSelector" date-change="changeMinMax" min-date="minDate" view="date" timezone="UTC" format="lll">
        </div>

        <div>
            <h4>Default view</h4>

            <select ng-change="changeData('view')"
                    ng-options="view for view in views"
                    ng-model="options.view"></select>
        </div>

        <div>
            <h4>Min view</h4>

            <select ng-change="changeData('minView')"
                    ng-options="view for view in views"
                    ng-model="options.minView">
                <option value="">Disabled</option>
            </select>
        </div>

        <div>
            <h4>Max view</h4>

            <select ng-change="changeData('maxView')"
                    ng-options="view for view in views"
                    ng-model="options.maxView">
                <option value="">Disabled</option>
            </select>
        </div>

        <div>
            <h4>Format</h4>

            <select ng-change="changeData('format')"
                    ng-options="format for format in formats"
                    ng-model="options.format">
                <option value="">Disabled</option>
            </select>
        </div>

        <h2>Callback</h2>
        <div>
            <h4>Select a date from either picker</h4>
            <div ng-bind="callbackState"></div>
            <button ng-click="callbackState = 'Callback: Not fired'">Reset state</button>
        </div>
        <input type="text" date-time ng-model="dates.today"  view="hours" date-change="changeDate">
        <div date-picker="dates.today" view="date" date-change="changeDate" timezone="UTC" watch-direct-changes="true"></div>
    </div>
</div>